﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewPortPage.aspx.cs" Inherits="OpenWaves.EPiServer.GeoProperties.ViewPortPage"
    MasterPageFile="/App_Resource/OpenWaves.EPiServer.GeoProperties/OpenWaves.EPiServer.GeoProperties.EPiServerUI.Master" %>
<%@ Register TagPrefix="EPiServerUI" Namespace="EPiServer.UI.WebControls" Assembly="EPiServer.UI" %>
<asp:Content ContentPlaceHolderID="HeaderContentRegion" runat="server">
    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
            
    <style type="text/css">
        .epitoolbuttonrowrightaligned {
            display: none;
        }

        form {
            margin: 0 10px;
        }

        label 
        {
            color: rgb(85, 85, 85);
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 13px;
        }
        
        .row {
            width: 100%;
            position: relative;
            margin: 0 0 10px 0;
        }
            
        input[type=text] {
            height: 30px;
            width: 150px;
            padding: 0 5px 0 5px;
            border: 1px solid rgb(146, 155, 164);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            border-radius: 4px;                      
        }    
        
        input[type=button] {
            height: 24px;
            border-radius: 3px;
            padding: 2px 4px;
            border: 1px solid #768388;
            background: #e4e4e4;
        }
        
        .control-group {
            float: left;
            margin: 0 10px 0 0;
        }
        
        .control-group label {
            display: block;
            margin: 0 0 2px 0;
        }

        .control-group input {
            display: block;
        }


        .search-row {
            display: table;
        }        
        
        .search-row > div {
            display: table-cell;
            padding: 0 15px 0 0;
        }

        .search-row > div:last-child {
            padding: 0 0 0 0;
        }
        
        .search-row .search-button-cell {
            width: 100px;
        }
        
        .search-row input {
            width: 100%;    
        }

        .map {
            width: 100%;
            height: 400px;
        }
                
    </style>
</asp:Content>
<asp:Content ContentPlaceHolderID="FullRegion" runat="server">
    
    <asp:ScriptManager runat="server"></asp:ScriptManager>

    <div id="googlemap" class="map row">
    </div>                  
    
    <div class="row">
        <div class="control-group">
            <label><%: Translate("northWestText") %></label>
            <label for="inputNorthWestLat"><%: LatitudeText %></label>
            <input id="inputNorthWestLat" type="text" readonly="true"/>
            <label for="inputNorthWestLng"><%: LongitudeText %></label>
            <input id="inputNorthWestLng" type="text" readonly="true"/>
        </div>
        <div class="control-group">
            <label><%: Translate("southEastText") %></label>
            <label for="inputSouthEastLat"><%: LatitudeText %></label>
            <input id="inputSouthEastLat" type="text" readonly="true" />
            <label for="inputSouthEastLng"><%: LongitudeText %></label>
            <input id="inputSouthEastLng" type="text" readonly="true"/>
        </div>
    </div>    

    <div class="epitoolbuttonrowrightaligned" runat="server">
        <EPiServerUI:ToolButton ID="InsertButton" IsDialogButton="True" OnClientClick="onOkButtonClick(this); return false;"
            GeneratesPostBack="false" SkinID="Save" Text="<%$ Resources: EPiServer, button.ok %>"
            ToolTip="<%$ Resources: EPiServer, button.ok %>" runat="server" />
        <EPiServerUI:ToolButton ID="CancelButton" IsDialogButton="True" OnClientClick="ToolButtonClick(null)"
            GeneratesPostBack="false" SkinID="Cancel" Text="<%$ Resources: EPiServer, button.cancel %>"
            ToolTip="<%$ Resources: EPiServer, button.cancel %>" runat="server" />
        <EPiServerUI:ToolButton ID="ClearButton" IsDialogButton="True" OnClientClick="ToolButtonClick({closeAction:'clear', viewPort:null})"
            GeneratesPostBack="false" Text="<%$ Resources: EPiServer, button.clear %>" ToolTip="<%$ Resources: EPiServer, button.clear %>"
            runat="server" />                     
    </div>

    <script type="text/javascript">

        function ToolButtonClick(returnValue) {
            EPi.GetDialog().Close(returnValue);
        }

        var geoViewPortPicker;
        $(function () {
            geoViewPortPicker = new GeoViewPortPicker({
                     mapContainerId: "googlemap", 
                     okButtonId: "okButton", 
                     cancelButtonId: "cancelButton",
                     inputNorthWestLatId: "inputNorthWestLat",
                     inputNorthWestLngId: "inputNorthWestLng",
                     inputSouthEastLatId: "inputSouthEastLat",
                     inputSouthEastLngId: "inputSouthEastLng"                     
                },
                {
                    viewPort: '<%= Request.QueryString["viewPort"] %>'
                }
            );
        });

        function onOkButtonClick() {
            var selectionBounds = geoViewPortPicker.getRectangleBounds();
            var result = {
                closeAction: "insert",
                viewPort: {
                    northEast: {
                        latitude: selectionBounds.getNorthEast().lat(),
                        longitude: selectionBounds.getNorthEast().lng()
                    },
                    southWest: {
                        latitude: selectionBounds.getSouthWest().lat(),
                        longitude: selectionBounds.getSouthWest().lng()
                    },
                    mapZoom: geoViewPortPicker.getMapZoom()
                }
            };

            ToolButtonClick(result);
        }        
    
    </script>
</asp:Content>
